<template>
    <div class="sub-category">
        <div class="container">
            <!-- 面包屑组件 -->
            <SubBread/>
            <!-- 筛选组件 -->
            <SubFilter @filter-change="changeFilter"/>
            <!-- 商品列表 -->
            <div class="goods-list">
                <SubSort @sort-change="changeSort"/>
                <ul>
                    <li v-for="item in goodsList" :key="item.id">
                        <GoodsItem :goods="{}"/>
                    </li>
                </ul>
                <!-- 无限加载 -->
                <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData()"/>
            </div>
        </div>
    </div>
</template>

<script>
import SubBread from "./components/SubBread.vue";
import SubFilter from "./components/SubFilter.vue";
import SubSort from "./components/SubSort.vue";
import GoodsItem from "./components/goods-item.vue";
import XtxInfiniteLoading from '@/components/library/XtxInfiniteLoading.vue';
import { useRoute} from 'vue-router';
import { findSubCategoryGoods } from '@/api/category';
import {watch, ref} from 'vue';
export default {
    name:'SubCategory',
    components:{
        SubBread,
        SubFilter,
        SubSort,
        GoodsItem,
        XtxInfiniteLoading,
    },
    setup(){
        const route = useRoute()


        const loading = ref(false)
        const finished = ref(false)
        const goodsList = ref([])

        // 配置findSubCategoryGoods请求的params参数
        let reqParams = {
            page:1,
            pageSize:20,
        }

         const getData = async () => {
            loading.value = true
            reqParams.categoryId = route.params.id
            const {data:{result}} = await findSubCategoryGoods(reqParams)
            if(result.item.length) {
                goodsList.value.push(...result.items)
                reqParams.page++
            }else {
                finished.value = true
            }
            loading.value = false
         }

         watch(()=>route.params.id,(newVal)=>{
            if(newVal&&route.path === ('/category/sub' + newVal)) {
                goodsList.value = []
                reqParams = {
                    page:1,
                    pageSize:20,
                }
                finished.value = false
            }
         })

        //  监听筛选区改变
        const changeFilter = (filterParams) => {
            reqParams = {...reqParams,...filterParams}
            reqParams.page = 1
            goodsList.value = []
            finished.value = false
        }

        // 监听排序改变
        const changeSort = (sortParams) => {
            reqParams = { ...reqParams, ...sortParams }
            reqParams.page = 1
            goodsList.value = []
            finished.value = false
        }

        return {
            loading,
            finished,
            goodsList,
            getData,
            changeFilter,
            changeSort,
        }
    }
}
</script>

<style scoped lang="less">
.goods-list {
    background-color: #fff;
    padding: 0 25px;
    margin-top: 25px;
    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;
        li {
            margin-right: 20px;
            margin-bottom: 20px;
            &:nth-child(5n) {
                margin-right: 0;
            }
        }
     }
}
</style>